import React, { Component } from 'react'
import axios from 'axios'
export default class Section extends Component {
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">天道酬勤</h3>
        <div>
          <input
            ref={(e) => (this.keyWordElement = e)}
            type="text"
            placeholder="请输入搜索内容"
          />
          &nbsp;
          <button onClick={this.search}>搜索</button>
        </div>
      </section>
    )
  }
  search = () => {
    const { value } = this.keyWordElement
    if (value === '') {
      return alert('不能为空')
    }
    this.props.updateAppState({ isFirst: false, islogding: true, err: '' })
    axios.get(`https://api.github.com/search/users?q=${value}`).then(
      (response) => {
        this.props.updateAppState({
          islogding: false,
          users: response.data.items,
        })
        this.keyWordElement.value = ''
      },
      (error) => {
        this.props.updateAppState({
          islogding: false,
          err: error.message,
        })
      }
    )
  }
}
